import React, {useEffect} from 'react';
import { IRouteComponentProps, Link } from 'umi'
import {useModel} from 'umi'
import { ArrowLeftOutlined,FormOutlined} from '@ant-design/icons';
import styles from "./[id].less"
const DetailPage: React.FC<IRouteComponentProps<{id:string}>> = ({match, history}) => {
  let {topicDetail, relatedList, commentList, getTopicDetailAction} = useModel('topic')
  useEffect(()=>{
    getTopicDetailAction(match.params.id);
  }, [])

  useEffect(()=>{
    if (topicDetail.title){
      document.title = topicDetail.title
    }
  }, [topicDetail.title])
  async function backs() {
    history.go(-1)
}
async function add(){
  history.push('/topicDetails/addComment')
}
  return (
    <div className={styles.wrap}>
        <div className={styles.top}>
                <ArrowLeftOutlined className={styles.left} onClick={()=>{backs()}}/>
                <span>{topicDetail.title}</span>
                <span></span>
        </div>
      {/* 专题详情 */}
      <div className={styles.imgs}>
             <div dangerouslySetInnerHTML={{__html:topicDetail.content}}></div>
      </div>
      {/* 评论列表 */}
      <div className={styles.built} >
        <ul className={styles.li1} onClick={()=>add()}>
              <span>精选留言</span>
              <FormOutlined className={styles.changes}/>
              {/* <span onClick={()=>history.push(`/detail/addComment?id=${match.params.id}`)}></span> */}
          </ul>
        {/**流言榜 */}
        {
            commentList.slice(0, 5).map((item,index)=>{
              return <ul key={index} className={styles.items}>
                                <li >
                                    <span className={styles.cons}>匿名用户</span>
                                    <span>{item.add_time}</span>
                                </li>
                                <li >{item.content}</li>

                    </ul>
            })
        }
        {/**查看更多按钮 */}
        <div className={styles.btn}>
            {
              commentList.length > 5?<Link  to={{pathname: "/topicDetails/commentList", state: commentList}} >查看更多</Link>: null
            }
        </div>
      </div>
      {/* 相关专题 */}
      <div>{
        relatedList.map((item,index)=>{
          return <li key={index} className={styles.detail2}>
            <img src={item.scene_pic_url} alt=""/>
            <p>{item.title}</p>
          </li>
        })
      }</div>
    </div>
  );
}


export default DetailPage;
